<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米官网头部模仿</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script>
			$(function(){
				$(window).load(function(){
					$('.list3-1').mouseover(function(){

		var num=$('.list3-1').index($(this));
		$('.clu').css('display','none');
		$('.clu').eq(num).css({display:'block'}).mouseover(function(){
			$('.clu').eq(num).css('display','block');
			}).mouseout(function(){
				$('.clu').eq(num).css('display','none');
				});
		
	})
	$('.list3-1').mouseout(function(){
		$('.clu').css('display','none');	
	})
				
		
		
		
		$('.list2 .list2-1').mouseenter(function(){
			$('.phone').slideDown()
			var num=$('.list2 .list2-1').index($(this));
			$('.iphone').css({display:'none'});
			$('.iphone').eq(num).css({display:'block'})
			
			
		})
		
		$('.list2 li').eq(7).mouseover(function(){
			$('.phone').css({display:'none'})
		})
		$('.list2 li').eq(8).mouseover(function(){
			$('.phone').css({display:'none'})
		})
		$('.phone').mouseleave(function(){
			$(this).slideUp()
		})
	
		
		
		
		
		

		$('.tab-right').on('mouseover',function(){
				clearInterval(timer);
				$('#box').css('display','block');
			})
			$('.tab-right').on('mouseout',function(){
				timer=setInterval(move,3000);
				$('#box').css('display','none');
				})
		$('#move-btn li').on('mousedown',function(){ 
				i=$('#move-btn li').index($(this))-1;
				
				move();
				
				});
			
			$('#box .a1').click(function(){
				i-=2;
				move();
			});
			$('#box .a2').click(function(){
				
				move();
				});	
			var i=0;	
			function move(){
				i++;
				$('#move-img li').stop(true).animate({opacity:0},500).eq(i%5).stop().animate({opacity:1});
				$('#move-btn li a').removeClass();
				$('#move-btn li a').eq(i%5).addClass('active');
				
				}
			var timer=setInterval(move,3000)



			$('.lastright').mouseover(function(){
				$('.shopping').slideDown();
			
			})
			$('.lastright').mouseout(function(){
				$('.shopping').stop().slideUp();
			
			})

			
		
		$('.tet').focus(function(){
		$('.strap').css('display','none')
		$('.bd,.butt,.jax').css('border-color','#fd6802')
		})
			$('.tet').blur(function(){
				$('.strap').css('display','block')
				$('.bd,.butt').css('border-color','#999')
		})
		
		 $('.tet').focus(function(){
		$('.jax').css('display','block')
		
		})
			$('.tet').blur(function(){
				$('.jax').css('display','none')
				
		})
		
		
		
		
		/**$.ajax('http://search.mi.com/search/expand?keyword=%E5%B0%8F%E7%B1%B35',{
	beforeSend:function(xhr){
		console.log('beforeSend');
	},
	error:function(){
		console.log('error');
	},
	datafilter:function(data,type){
		console.log(type);
		console.log('datafilter');
		return data;
	},
	success:function(data,ts,jQXHR){
		console.log(data);
	},
	complete:function(xhr,ts){
		console.log('complete');
	},
		dataType: 'jsonp',
		jsonp:'jsonpcallback',
		jsonpCallback:'xmsearch'

})
		
	$('.tet').keyup(function(){
			var value=$(this).val();
			$.getJSON("http://search.mi.com/search/expand?keyword="+value+"&jsonpcallback=?",function(data){
				var oList=$('.jax').get(0);
				var html='';
				if(data.length>0){
					for(var a=0;a<data.length;a++){
						html+= '<li><a href="javascript:;">' + data[a].Key + '</a></li>';
					}
					oList.style.display='block';
					oList.innerHTML=html;
				}else{
					oList.style.display='none'
				}
			});
			
			
		})	
		var isearchindex=-1
		$('.tet').keyup(function(ev){
		var ev=ev||window.event
		if(ev.keyCode===38&&isearchindex>0){
		
		isearchindex--;
		
		}else if(ev.keyCode===40&&isearchindex<$('.jax').length-1){
		
		isearchindex++;
		
		}
		})**/
		var
			
			oSeachContent = $('.tet'),
			
			oSearchList   = $('.jax'),
			iSearchIndex  = -1,
			sOriHtml 	  = oSearchList.html();
		$('.tet').keyup(function (ev) {
			var
				ev = ev || window.event,
				aLi = $('.jax li');
			if(ev.keyCode === 38 || ev.keyCode === 40) {
				if(ev.keyCode === 38 && iSearchIndex > 0) {
					iSearchIndex--;
				} else if(ev.keyCode === 40 && iSearchIndex < aLi.length - 1) {
					iSearchIndex++;
				}
				oSeachContent.val(aLi.removeClass('active').eq(iSearchIndex).addClass('active').data('key'));
			}
		}).bind('input propertychange', function () {
			var sSearchCon = $(this).val();
			if(sSearchCon) {
				$.ajax({
					url: 'http://search.mi.com/search/expand',
					data: {keyword: sSearchCon},
					jsonp: 'jsonpcallback',
					//jsonpCallback: 'xmsearch',
					dataType: 'jsonp',
					success: function (data) {
						var sHtml = '';
						data.forEach(function (v) {
							sHtml += '<li data-key="' + v.Key + '"><a href="javascript:;"><span>约有' + v.Rst + '件</span>' + v.Key + '</a></li>';
						});
						if(sHtml) {
							oSearchList.css('display', 'block').html(sHtml);
						} else {
							oSearchList.css('display', 'none');
						}
						iSearchIndex = -1;
					}
				});
			} else {
				oSearchList.html(sOriHtml);
				iSearchIndex = -1;
			}
		});
       
	
	

		
		
				})
	
			})
		</script>
	</head>
	<body>
		<!--首页-->
		<div class="header">
			<div class="top">
				<div class="top-left">
					<ul class="list">
						<li class="firstlist"><a href="javascript:;">小米网</a></li>
						<li><a href="javascript:;">MIUI</a></li>
						<li><a href="javascript:;">米聊</a></li>
						<li><a href="javascript:;">游戏</a></li>
						<li><a href="javascript:;">多看阅读</a></li>
						<li><a href="javascript:;">云服务</a></li>
						<li><a href="javascript:;">小米网移动版</a></li>
						<li><a href="javascript:;">问题反馈</a></li>
						<li class="lastlist"><a href="javascript:;">select Region</a></li>
					</ul>
					
				</div>
				<div class="top-right">
				<a href="javascript:;">登录 |</a>
				<a href="javascript:;">注册</a>
				
				
				<a class="lastright" href="#"><i class="iconfont">&#xe607;</i>购物车(0)</a>
	
				</div>
				
				
			</div>
			<div class="shopping">购物车中还没有商品，赶快选购吧</div>
		</div>
		
		<!--导航-->
		<div class="nav">
		<div class="nav-left">
		<img src="img/logo.jpg"/>
		<img class="img1"src="img/tp.gif"/>
		</div>
		<div class="nav-center">
		<ul class="list2">
		<li class="list2-1"><a href="javascript:;">小米手机</a></li>
		<li class="list2-1"><a href="javascript:;">红米</a></li>
		<li class="list2-1"><a href="javascript:;">平板</a></li>
		<li class="list2-1"><a href="javascript:;">电视</a></li>
		<li class="list2-1"><a href="javascript:;">盒子影音</a></li>
		<li class="list2-1"><a href="javascript:;">路由器</a></li>
		<li class="list2-1"><a href="javascript:;">硬件</a></li>
		<li><a href="javascript:;">服务</a></li>
		<li><a href="javascript:;">社区</a></li>
		</ul>
		</div>
		<div class="nav-right">
		<form class="bd">
		
		<input type="text" class="tet"/>
		
		<input type="button" value="&#xe6a4;" class="iconfont butt" />
		
		</form>
		<div class="strap">
		<a class="strap1" href="#">红米3s</a>
		<a href="javascript:;">小米手环2</a>
		</div>
		
	<ul class="jax">
		<li data-key="小米手机5"><a href="javascript:;">小米手机5</a><span>约有11件</span></li>
		<li data-key="空气净化器2"><a href="javascript:;">空气净化器2</a><span>约有1件</span></li>
		<li data-key="活塞耳机"><a href="javascript:;">活塞耳机</a><span>约有4件</span></li>
		<li data-key="小米路由器"><a href="javascript:;">小米路由器</a><span>约有8件</span></li>
		<li data-key="移动电源"><a href="javascript:;">移动电源</a><span>约有21件</span></li>
		<li data-key="运动相机"><a href="javascript:;">运动相机</a><span>约有3件</span></li>
		<li data-key="小米摄像机"><a href="javascript:;">小米摄像机</a><span>约有2件</span></li>
		<li data-key="小米体重秤"><a href="javascript:;">小米体重秤</a><span>约有1件</span></li>
		<li data-key="小米插线板"><a href="javascript:;">小米插线板</a><span>约有13件</span></li>
		<li data-key="配件优惠套装"><a href="javascript:;">配件优惠套装</a><span>约有32件</span></li>
		<li><a href="javascript:;"></a></li>
	</ul>
		
		
		</div>
		</div>
		<div class="phone">
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米MAX</p>
		<p>1499元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米MAX</p>
		<p>1499元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米MAX</p>
		<p>1499元起</p>
		</dd>
		
		</dl>
		</div>
		
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>红米note3</p>
		<p>899元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>红米note3</p>
		<p>899元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>红米note3</p>
		<p>899元起</p>
		</dd>
		
		</dl>
		</div>
		
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米平板2 16G</p>
		<p>999元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米平板2 16G</p>
		<p>999元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米平板2 16G</p>
		<p>999元起</p>
		</dd>
		
		</dl>
		</div>
		
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米电视3s 43英寸</p>
		<p>1799元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米电视3s 43英寸</p>
		<p>1799元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米电视3s 43英寸</p>
		<p>1799元起</p>
		</dd>
		
		</dl>
		</div>
		
		
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米盒子mini版</p>
		<p>199元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米盒子mini版</p>
		<p>199元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米盒子mini版</p>
		<p>199元起</p>
		</dd>
		
		</dl>
		</div>
		
		
		
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>全新小米路由器</p>
		<p>699元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>全新小米路由器</p>
		<p>699元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>全新小米路由器</p>
		<p>699元起</p>
		</dd>
		
		</dl>
		</div>
		
		
		
		
		<div class="iphone">
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米空气净化器2</p>
		<p>699元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米空气净化器2</p>
		<p>699元起</p>
		</dd>
		
		</dl>
		<dl class="iphone-1">
		<dt><img src="img/i1.jpg"/></dt>
		<dd>
		<p>小米空气净化器2</p>
		<p>699元起</p>
		</dd>
		
		</dl>
		</div>
		</div>
		<!--选项卡-->
		<div class="tab">
		<div class="tab-left">
		<ul class="list3">
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		<li class="list3-1"><a href="javascript:;">手机 平板 电话卡<span>></span></a></li>
		</ul>
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米手机5c</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米电视</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米无人机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米移动电源</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米耳机</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
	
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
	<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">保护壳</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米鼠标垫</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">小米插线板</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		
		
		
		<div class="clu">
		<div class="cluth">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		
		</div>
		
		<div class="clut">
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl><br/>
		
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		<dl class="cluth-1">
		<dt class="cluth-2"><img src="img/s1.jpg"/></dt>
		<dd class="cluth-3">
		<p class="cluth-3-1">90分旅行箱</p>
		<p class="cluth-3-2"><a href="javascript:;">抢购</a></p>
		</dd>
		</dl>
		</div>
		</div>
		
		
		
		
		
		
		</div>
		
		<div class="tab-right">
		<ul id="move-img">
        	<li class="first"><img src="img/banner1.jpg"></li>
            <li><img src="img/banner2.jpg"></li>
            <li><img src="img/banner3.jpg"></li>
            <li><img src="img/banner4.jpg"></li>
            <li><img src="img/banner5.jpg"></li>
            
        </ul>
        <ul id="move-btn">
        	<li><a class="active" href="#"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
           
        </ul>
        <div id="box">
        	<a class="a1" href="#"><</a>
            <a class="a2" href="#">></a>
        </div>
		
		
		</div>
		</div>
		
		
		
		
		
	</body>
</html>
